@charset "utf-8";

/**
 * @module 背景与边框
 * @description 为元素添加边框（包括1px边框）
 * @method border
 * @version 2.0.0
 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>
 * @param {String} $border-color 指定边框颜色 <2.0.0>
 * @param {String} $border-style 指定边框样式 <2.0.0>
 * @param {String} $radius 指定边框圆角半径，默认值：null <2.0.0>
 */
@mixin border(
  $border-width: 1px, 
  $border-color:rgb(214, 228, 239), 
  $border-style: solid,
  $radius: null
) {
  // 为边框位置提供定位参考
  position: relative;

  @if $border-width==null {
    $border-width: 0;
  }

  border-radius: $radius;

  &::after {
    // 用以解决边框layer遮盖内容
    pointer-events: none;
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    // fix当元素宽度出现小数时，边框可能显示不全的问题
    // overflow: hidden;
    content: "\0020";
    border-color: $border-color;
    border-style: $border-style;
    border-width: $border-width;

    // 适配dpr进行缩放
    @media screen and (-webkit-max-device-pixel-ratio: 1.49) {
      width: 100%;
      height: 100%;
  
      @if $radius !=null {
        border-radius: $radius;
      }
    }

    @media screen and (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49) {
      width: 200%;
      height: 200%;
      transform: scale(.5);

      @if $radius !=null {
        border-radius: $radius * 2;
      }
    }

    @media screen and (-webkit-min-device-pixel-ratio: 2.5) {
      width: 300%;
      height: 300%;
      transform: scale(.33333);

      @if $radius !=null {
        border-radius: $radius * 3;
      }
    }

   transform-origin: 0 0;
  }
}
